<!--
 作者：ex_wangshuai
 日期：2016-11-15
 功能：首页-掌天下-产品评价深度分析
 参数：
 事件：
-->
<template>
  <div class="evaluationMoreAnalysis">
    <div class="loading-box">
      <img src="../../../../static/img/loading.gif" class="loading">
    </div>
    <toolbar :view-title="viewTitle">
      <div class="leftButton" type="button" @click="this.$broadcast('goBack')" slot="left-button">&nbsp;</div>
      <div class="rightButton"
           type="button"
           slot='right-button'>
        <div class="filterButton" @click="showFilter('pingtai')" v-show="!filterOpenState">
          <span class="filterIcon" :page-id="routeKey">&nbsp;</span>
          <span>筛选</span>
        </div>
        <div class="menuButton" @click="showSlideMenu" v-show="!filterOpenState">
          <span class="menuIcon">&nbsp;</span>
          <span>菜单</span>
        </div>
        <span v-show="filterOpenState" @click="doFilter" class="filterOver">完成</span>
      </div>
    </toolbar>
    <div class="evaluation-more-analysis-content">
      <div class="top-box">
        <div class="title-time">
          <p class="title">{{currentConditionText}}深度分析</p>
        </div>
        <div class="filter-message-box clearfix">
          <a class="filter-condition" @click="showFilter('xinghao')" href="javascript:;">{{xinghao}}</a>
          <a class="filter-condition" @click="showFilter('pingtai')" href="javascript:;">{{pingtai}}</a>
          <a v-if="startTime" class="filter-condition" @click="showFilter('shijian')" href="javascript:;">{{startTime | timeFilter}} - {{endTime | timeFilter}}</a>
        </div>
      </div>
      <div style="height: 1.5vh;background:#eeeeee;"></div>
      <div v-if="tableData.length">
        <div class="showMessage">
          <p :class="['displayNone', 'tableMessage', {displayShow: 0==showId}]">{{tableMessageName1}}总提及率 : {{tableMessageReferPercent1}}, 总差评率 : {{tableMessageBadReferPercent1}}</p>
          <p :class="['displayNone', 'tableMessage', {displayShow: 1==showId}]">{{tableMessageName2}}总提及率 : {{tableMessageReferPercent2}}, 总差评率 : {{tableMessageBadReferPercent2}}</p>
          <p :class="['displayNone', 'tableMessage', {displayShow: 2==showId}]">{{tableMessageName3}}总提及率 : {{tableMessageReferPercent3}}, 总差评率 : {{tableMessageBadReferPercent3}}</p>
        </div>
        <condition-filter
          :condition-list="conditionList">
        </condition-filter>
        <div class="table-th">
          <table class="table-th-table">
            <tr>
              <td v-for="text in tableTh">{{text}}</td>
            </tr>
          </table>
        </div>
        <div class="table-box">
          <!--<div v-for="itemAll in tableData" :class="['displayNone', {displayShow: $index==showId}]">-->
          <div v-for="itemAll in tableData">
            <div v-if="$index==showId" class="scroll-box">
              <div v-for="item in itemAll.attributes">
                <div class="table-item" @click="showHide($index)">
                  <ul class="clearfix">
                    <li class="display-flex item-center">
                      <img class="img-rotate" style="height:0.126rem;margin-right:0.08rem;" :src="imgUrl" data-img="{{imgUrl}}">
                      <span>{{item.name | wordFilter}}</span>
                    </li>
                    <li>{{item.referPercent}}</li>
                    <li>{{item.badReferPercent}}</li>
                  </ul>
                </div>
                <div class="table-table" transition="expand3">
                  <ul class="clearfix" v-for="itemTd in item.propertys">
                    <li>{{itemTd.name | wordFilter}}</li>
                    <li>{{itemTd.referPercent}}</li>
                    <li>{{itemTd.badReferPercent}}</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--<div class="item-data" v-if="!tableData.length">-->
        <!--暂无数据-->
      <!--</div>-->
    </div>
    <page-turning :mkey="routeKey" :page-id="'industry'">
    </page-turning>
    <slide-list v-if="showList">
    </slide-list>
    <filter-view v-show="filterOpenState"
                 :default-org-id="defaultOrgId"
                 :default-category="defaultCategory"
                 :default-category-id="defaultCategoryId"
                 :choose-platforms="pingtai"
                 :choose-platforms-id="pingtaiId"
                 :page-id="routeKey"
                 :filter-button = "filterButton"
                 :default-start-date="startTime"
                 :default-end-date="endTime">
    </filter-view>
    <confirm :show.sync="timeoutStatus"
             title="加载失败,您可以"
             cancel-text="返回首页"
             confirm-text="重新加载"
             @on-cancel="this.$route.router.go('/home')"
             @on-confirm="reload">
    </confirm>
    <confirm :show.sync="show" title="是否退出？" cancel-text="取消" confirm-text="确定" @on-confirm="onAction('确认')"></confirm>
  </div>
</template>

<script>
  import Toolbar from '../../common/Toolbar.vue'
  import ConditionFilter from '../../common/ConditionFilter.vue'
  import pageTurning from '../../common/pageTurning.vue'
  import slideList from '../list/slideList.vue'
  import FilterView from '../../common/FilterViewForConsultant.vue'
  import Confirm from 'vux/dist/components/Confirm'

  export default{
    components: {
      Toolbar,
      ConditionFilter,
      pageTurning,
      slideList,
      FilterView,
      Confirm
    },
    data () {
      var data = {}
      // 点击评价指标切换标题
      data.currentConditionText = ''
      data.show = false
      data.timeoutStatus = false
      data.xinghao = ''
      data.pingtai = '所有平台'
      data.pingtaiId = ''
      data.startTime = ''
      data.endTime = ''
      data.filterButton = ''
      data.imgUrl = './static/img/trigle1.png'
      data.pageTitle = ''
      data.showList = false
      data.defaultOrgId = ''
      data.defaultCategory = ''
      data.defaultCategoryId = ''
      data.routeKey = ''
      data.filterOpenState = false
      data.viewTitle = ''
      data.tableTitle = {}
      data.tableData = []
      data.conditionList = []
      data.tableMessageName1 = ''
      data.tableMessageBadReferPercent1 = ''
      data.tableMessageReferPercent1 = ''
      data.tableMessageName2 = ''
      data.tableMessageBadReferPercent2 = ''
      data.tableMessageReferPercent2 = ''
      data.tableMessageName3 = ''
      data.tableMessageBadReferPercent3 = ''
      data.tableMessageReferPercent3 = ''
      data.tableTh = ['二/三级指标', '提及率', '差评率']
      data.showId = 0
      data.params = {
        mkey: '',
//        refresh: true,
        org_code: '',
        model_id: '',
        model: '',
        product: '',
        brand: '',
        brand_id: '',
        category_id: '',
        category: '',
        platform_id: '',
        platform: '',
        dateSeg: '',
        startTime: '',
        endTime: ''
      }
      return data
    },
    methods: {
      showHide: function (value) {
        var dom = document.getElementsByClassName('table-table')[value]
        if (dom.style.display === '' || dom.style.display === 'block') {
          dom.style.display = 'none'
          document.getElementsByClassName('img-rotate')[value].classList.add('rotate')
        } else {
          dom.style.display = 'block'
          document.getElementsByClassName('img-rotate')[value].classList.remove('rotate')
        }
        if (document.getElementsByClassName('table-table').length === value + 1) {
          document.getElementsByClassName('table-box')[0].scrollTop = 2000
        }
      },
      reload: function () {
        window.location.reload()
      },
      goBack: function () {
//        window.history.back()
        this.show = true
      },
      onAction: function (value) {
        if (value === '确认') {
          window.cordova.exec(function (success) {
          }, function (error) {
            window.alert('Error: ' + error)
          }, 'MideaCommon', 'exit', [])
        }
      },
      doFilter: function () {
        this.$broadcast('doFilter')
      },
      showFilter: function (value) {
        this.filterButton = value
        this.filterOpenState = true
      },
      showSlideMenu: function () {
        this.showList = !this.showList
        var self = this
        setTimeout(function () {
          self.$broadcast('slideStart')
        }, 0)
      },
      getHttpData: function (httpUrl, params) {
        this.$http.post(httpUrl, params, {_timeout: 30000}).then((res) => {
          if (res.json().error) {
            this.timeoutStatus = true
            return
          }
          var data = res.json()
          this.defaultOrgId = data.org_code || ''
          this.defaultCategory = data.category || ''
          this.defaultCategoryId = data.category_id || ''
          this.xinghao = data.product.replace('|', '')
          this.pingtai = data.platformCnd || data.platform
          this.startTime = data.startTime || ''
          this.endTime = data.endTime || ''
          this.$broadcast('loadDataDone')
          document.getElementsByClassName('loading-box')[0].style.display = 'none'
          // 页面标题
          this.viewTitle = res.json().title
          this.tableTitle = res.json().chartDatas[0]
          this.tableData = res.json().chartDatas[0].detail
          if (!this.tableData.length) {
            return
          }
          this.tableMessageName1 = res.json().chartDatas[0].detail[0].name
          this.tableMessageBadReferPercent1 = res.json().chartDatas[0].detail[0].badReferPercent
          this.tableMessageReferPercent1 = res.json().chartDatas[0].detail[0].referPercent
          this.tableMessageName2 = res.json().chartDatas[0].detail[1].name
          this.tableMessageBadReferPercent2 = res.json().chartDatas[0].detail[1].badReferPercent
          this.tableMessageReferPercent2 = res.json().chartDatas[0].detail[1].referPercent
          this.tableMessageName3 = res.json().chartDatas[0].detail[2].name
          this.tableMessageBadReferPercent3 = res.json().chartDatas[0].detail[2].badReferPercent
          this.tableMessageReferPercent3 = res.json().chartDatas[0].detail[2].referPercent
          this.currentConditionText = this.tableData[0].name
          var conditionList = []
          for (var i = 0; i < this.tableData.length; i++) {
            conditionList.push({'id': i, 'value': '', 'text': this.tableData[i].name})
          }
          this.conditionList = conditionList
          this.pageTitle = this.tableData[this.showId].name
          setTimeout(function () {
            var htmlHeight = document.documentElement.clientHeight
            var toorBarHeight = document.getElementsByClassName('toolbar')[0].clientHeight
            var topBoxHeight = document.getElementsByClassName('top-box')[0].clientHeight
            var tapHeight = document.getElementsByClassName('tab')[0].clientHeight
            var conditionFilter = document.getElementsByClassName('condition-filter')[0].clientHeight
            var tableTh = document.getElementsByClassName('table-th')[0].clientHeight
            var showHeight = document.getElementsByClassName('showMessage')[0].clientHeight
            var divBox = document.getElementsByClassName('table-box')[0]
            divBox.style.maxHeight = htmlHeight - toorBarHeight - topBoxHeight - tapHeight - conditionFilter - tableTh - showHeight - 0.015 * htmlHeight - 2 + 'px'
          }, 0)
        }, (res) => {
          this.timeoutStatus = true
        })
      }
    },
    events: {
      changeCondition: function (id) {
        this.showId = id
        this.pageTitle = this.tableData[id].name
      },
      filterConditions: function (filterConditions) {
        document.getElementsByClassName('loading-box')[0].style.display = 'block'
        if (filterConditions.platform !== '') {
          this.pingtai = filterConditions.platform
          this.pingtai = this.pingtai.replace(/,/g, '，')
        }
        this.params.org_code = filterConditions.org_code || ''
        this.params.brand = filterConditions.brand
        this.params.brand_id = filterConditions.brand_id
        this.params.category = filterConditions.category
        this.params.category_id = filterConditions.category_id
        this.params.platform = filterConditions.platform
        this.params.platform_id = filterConditions.platform_id
        this.params.dateSeg = filterConditions.dateSeg
        this.params.startTime = filterConditions.starttime
        this.params.endTime = filterConditions.endtime
        this.params.model_id = filterConditions.model_id
        this.params.product = filterConditions.brand ? filterConditions.brand + '|' + filterConditions.model : ''
        this.params.model = filterConditions.model
        this.params.mkey = this.routeKey
        this.getHttpData(this.httpUrl, this.params)
      }
    },
    created () {
      this.routeKey = 'evaluationMoreAnalysis'
      this.httpUrl = window.interface.indusPage
      var params = this.params
      params.mkey = this.routeKey
      this.getHttpData(this.httpUrl, params)
    },
    filters: {
      timeFilter: function (val) {
        if (val) {
          val = val.split('-')
          val = val.join('')
          return val
        }
      },
      wordFilter: function (val) {
        if (val.length >= 9) {
          return val.substr(0, 8)
        } else {
          return val
        }
      }
    },
    ready: function () {
      this.$on('changeCondition', function (id, text) {
        this.currentConditionText = text
      })
    }
  }
</script>

<style lang="scss" scoped>
  .evaluation-more-analysis-content {
    position: relative;
    margin-top: 6.6vh;
    margin-bottom: 7.4vh;
  }

  .top-box{
    padding: 2.2vh 0 2.2vh .3rem;
  }
  .filter-message-box{
    font-size: 0.28rem;
  }

  .filter-condition{
    margin-right: 0.2rem;
    margin-top: 1.1vh;
    font-size: 0.24rem;
    float: left;
    color: #4A90E2;
    padding: 0.35vh 1.2vh;
    box-sizing: border-box;
    border: 1px solid #4A90E2;
    background: #FAFCFF;
    border-radius: 3px;
    max-width: 85%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .title {
    font-size: .32rem;
    background: url('../../../../static/img/time-title2.png') no-repeat center right;
    background-position: 0 center;
    background-size: .28rem .26rem;
    padding-left: .4rem;
    color: #333333;
  }

  .time, .subHeader {
    font-size: .26rem;
    background: url('../../../../static/img/time-time.png') no-repeat center right;
    background-position: .3rem center;
    background-size: .3rem .24rem;
    padding-left: .7rem;
    margin-top: 1.5vh;
    height: 3vh;
    line-height: 3vh;
  }
  .subHeader {
    background: url('../../../../static/img/icon-kongtiao.png') no-repeat center right;
    background-position: .3rem center;
    background-size: .3rem .3rem;
  }
  .tableMessage{
    font-size: 0.26rem;
    padding: 0.8vh 0 0.2vh 0.3rem;
    color: #666;
  }
  .btnPage {
    position: fixed;
    left: 0;
    top: 50vh;
    width: 100%;
    z-index: 200;
  }

  .btn-previous {
    width: 0.4rem;
    height: 0.8rem;
    float: left;
    background: rgba(0, 0, 0, 0.2);
  }

  .btn-next {
    width: 0.4rem;
    height: 0.8rem;
    float: right;
    background: rgba(0, 0, 0, 0.2);
  }

  .leftButton {
    width: .5rem;
    height: 100%;
    background: url('../../../../static/img/btn-back.png') no-repeat center right;
    background-size: 100%;
  }

  .table-box {
    height: 54.5vh;
    overflow: auto;
  }

  .table-th-table, .table-table ,.table-item{
    width: 100%;
  }

  .table-th-table {
    background: #E4F0FF;
  }

  .table-item ul li, .table-table ul li, .table-th-table tr td {
    width: 33.333%;
    text-align: center;
    line-height: 7.5vh;
    height: 7.5vh;
  }
  .table-item ul li:nth-child(1), .table-table ul li:nth-child(1){
    width: 44%;
  }
  .table-item ul li:nth-child(2), .table-table ul li:nth-child(2){
    width: 22.666%;
    text-align: left;
  }
  .table-item ul li:nth-child(3), .table-table ul li:nth-child(3){
    width: 33.333%;
  }
  .table-item ul li, .table-table ul li{
    float: left;
  }
  .table-item ul li{
    color: #666666;
  }
  .table-item ul li:nth-child(1){
    padding-left: 2%;
    box-sizing: border-box;
    text-align: left;
  }
  .table-table ul li:nth-child(1){
    padding-left: 9%;
    box-sizing: border-box;
    text-align: left;
    overflow: hidden;
  }
  .table-table {
    background: #f8f8f8;
  }

  .displayNone {
    display: none;
  }

  .displayShow {
    display: block;
  }
  .rotate{
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
  }
</style>
